<template>
  <div class="store">
    <!-- 顶部 -->
    <van-nav-bar title="选择门店" left-arrow @click-left="onClickLeft" fixed />
    <!-- tab -->
    <div style="margin-top: 46px">
      <mt-navbar v-model="selected">
        <mt-tab-item id="1">选择门店</mt-tab-item>
        <mt-tab-item id="2">常用/收藏</mt-tab-item>
        <mt-tab-container v-model="selected" class="tab-content">
          <!-- 选择门店 -->
          <mt-tab-container-item class="store-selected" id="1">
            <!-- 地址加搜索框 -->
            <div class="d-flex justify-content-between">
              <span
                style="
                  display: inline-block;
                  line-height: 34px;
                  font-size: 14px;
                "
                >武汉市 洪山区 ></span
              >
              <van-search
                style="padding: 0"
                v-model="value"
                placeholder="请输入搜索关键词"
              />
            </div>

            <!-- 相关内容 -->
            <!-- <van-empty
              class="custom-image"
              image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
              description="这里什么都没有"
            /> -->
            <!-- 百度地图 -->
            <!-- <div class="info">
              最新版GL地图命名空间为BMapGL,
              可按住鼠标右键控制地图旋转、修改倾斜角度。
            </div> -->
            <div id="container"></div>

            <!-- 附近地址 -->
            <h6>附近地址</h6>
            <div class="address-list clearfix">
              <!-- 单个地址信息 -->
              <div
                class="address"
                v-for="(item, i) of addressInfo"
                :key="i"
                @click="sendAddress(i)"
              >
                <!-- 左边相关地址数据 -->
                <div class="address-info">
                  <h6 style="padding: 5px 0">{{ item.title }}</h6>
                  <div class="d-flex">
                    <van-icon name="location-o" />
                    <p>{{ item.address }}</p>
                  </div>
                  <h6 style="padding: 3px 0">
                    <van-icon
                      name="underway-o"
                      style="position: relative; top: 2px"
                    />
                    <span class="time">10:00~22:00</span>
                    <p class="tags">正在营业</p>
                    <p class="tags">可外送</p>
                  </h6>
                </div>
                <!-- 竖线 -->
                <!-- <div class="col-center"></div> -->
                <!-- 右边 去下单 -->
                <!-- <div class="right-text">
                  <h6>去下单</h6>
                </div> -->
              </div>
            </div>
          </mt-tab-container-item>

          <!-- 常用收藏 -->
          <mt-tab-container-item id="2">
            <div class="address-list collect-store clearfix">
              <!-- 单个收藏地址信息 -->
              <div
                class="address"
                v-for="(item, i) of userCollectStore"
                :key="i"
                @click="sendAddress(i)"
              >
                <!-- 左边相关地址数据 -->
                <div class="address-info">
                  <van-icon
                    @click="collect"
                    v-if="isCollect"
                    style="position: relative; top: 2px"
                    name="star"
                    color="#ff8c00"
                  />
                  <van-icon
                    v-else
                    style="position: relative; top: 2px"
                    name="star-o"
                  />
                  <h6 style="padding: 5px 0; display: inline-block">
                    {{ item.title }}
                  </h6>
                  <div class="d-flex">
                    <van-icon name="location-o" />
                    <p>{{ item.address }}</p>
                  </div>
                  <h6 style="padding: 3px 0">
                    <van-icon
                      name="underway-o"
                      style="position: relative; top: 2px"
                    />
                    <span class="time">10:00~22:00</span>
                    <p class="tags">正在营业</p>
                    <p class="tags">可外送</p>
                  </h6>
                </div>
                
              </div>
            </div>
          </mt-tab-container-item>
        </mt-tab-container>
      </mt-navbar>
    </div>
  </div>
</template>

<script>
// 引入vuex
import { mapState, mapMutations } from "vuex";

export default {
  data() {
    return {
      selected: "1",
      value: "",
      addressInfo: [],
      isCollect: true, //是否收藏
      userCollectStore:[],  //用户收藏列表
    };
  },
  computed:{
    ...mapState(["addressInfoNow",]),
  },
  methods: {
    ...mapMutations(["setAddressInfoNow"]),
    onClickLeft() {
      this.$router.back(-1);
    },
    baiduMap() {
      var map = new BMap.Map("container"); // 创建Map实例
      // 定死经纬度
      let long = 114.386575;
      let lat = 30.512478;
      // console.log(`经度long:${long},纬度lat:${lat}`);
      var point = new BMap.Point(long, lat);
      // 初始化地图,设置中心点坐标和地图级别
      map.centerAndZoom(point, 12);
      // 开启鼠标滚轮缩放
      map.enableScrollWheelZoom(true);
      // 调用禁止拖拽
      // map.disableDragging();
      // 添加平移缩放控件 在左上角控件
      let navCtrl = new BMap.NavigationControl();
      map.addControl(navCtrl);
      // 添加比例尺控件   默认五公里，在左下角
      let scaleCtrl = new BMap.ScaleControl();
      map.addControl(scaleCtrl);
      // 添加定位控件 显示红色小图标
      let glCtrl = new BMap.GeolocationControl();
      map.addControl(glCtrl);
      // 添加覆盖物   Marker对象
      let marker = new BMap.Marker(point);
      map.addOverlay(marker);
      // LBS服务  逆地址解析
      let geoc = new BMap.Geocoder();
      geoc.getLocation(point, (res) => {
        // 得到当前地址信息
        // console.log(res);
        // 当前城市
        // console.log(res.addressComponents.city);
      });
      // LBS服务  查询周边
      let localSearch = new BMap.LocalSearch(
        // 当前位置point
        point,
        {
          // options对象，指定搜索结束后的回调
          onSearchComplete: (res) => {
            // console.log(res);
            this.addressInfo = res.Br;
            // 测试获取周边店铺数据
            console.log(this.addressInfo);
          },
        }
      );
      localSearch.search("粥");
    },
    // 兄弟传值
    sendAddress(index) {
      // 测试数据
      // console.log(this.addressInfo[index]);
      let storeInfo = this.addressInfo[index];
      // 转换对象
      let addressInfoNow = JSON.stringify(storeInfo);
      sessionStorage.setItem("addressInfoNow", addressInfoNow);
      // 修改vuex中的定位信息
      this.setAddressInfoNow(storeInfo);

      // 只保存店铺名称和店铺地址
      this.$store.commit("setAddressTitle", storeInfo.title);
      sessionStorage.setItem("addressTitle", storeInfo.title);
      this.$store.commit("setAddressDetail", storeInfo.address);
      sessionStorage.setItem("addressDetail", storeInfo.address);

      // 返回上一页
      this.$router.go(-1);
    },
    // 获得当前用户收藏列表
    getCollectStore() {
      this.axios.get("/api/store/getFavoritesStore").then((result) => {
        console.log(result.data.data);
        this.userCollectStore = result.data.data;
        for(let item of result.data.data){
          // console.log(item);
          // if(item.uid == this.getInfo.uid){
          //    console.log(item.uid); 
          // }
        }
        // console.log(this.getInfo.uid);
      });
    },
    // 是否收藏
    collect() {
      // 是否清除定时器
      if (this.timer != null) {
        clearTimeout(this.timer);
      }
      this.isCollect = !this.isCollect;
      // 防抖
      this.timer = setTimeout(() => {
        //点击collect时，
        if (this.isCollect == true) {
          Toast("收藏成功");
        } else {
          Toast("取消收藏成功");
        }

        // 请求是否收藏
        this.axios
          .post(
            "/api/store/addFavoritesStore",
            `uid=${this.getInfo.uid}&address=${this.getInfo.address}&city=${this.getInfo.city}&province=${this.getInfo.province}&title=${this.getInfo.title}`
          )
          .then((result) => {
            // console.log(result);
          });
      }, 2000);
    },
  },
  mounted() {
    // 启动百度
    this.baiduMap();
    // 得到当前用户收藏列表
    this.getCollectStore();
  },
};
</script>

<style lang="scss" scoped>
.tab-content {
  position: fixed;
  left: 0;
  top: 97px;
  right: 0;
  .store-selected {
    height: 100%;
  }
}

// 地图下附近地址信息
.address-list {
  position: fixed;
  top: 366px;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: scroll;
  .address {
    box-shadow: 0 0 5px #666;
    margin: 15px 10px;
    border-radius: 10px;
    -webkit-align-items: center;
    display: flex;
    align-items: center;
    padding: 15px 10px;
    .address-info {
      text-align: left;
      width: 80%;
      h6 {
        margin: 0;
        font-size: 15px;
        font-weight: 600;
        .time {
          font-size: 12px;
          font-weight: 400;
        }
        .tags {
          border: 1px solid #ff8c00;
          color: #ff8c00;
          border-radius: 5px;
          padding: 1px 3px;
          margin-left: 5px;
        }
      }
      p {
        display: inline-block;
        font-size: 12px;
        margin: 0;
      }
    }
    .col-center {
      border: 1px solid black;
      margin-left: 10%;
      margin-right: 15%;
    }
    .right-text {
      h6 {
        height: 85px;
        line-height: 85px;
        text-align: center;
        margin: 0;
      }
    }
  }
}

//收藏店铺
.collect-store {
  position: fixed;
  top: 91px;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: scroll;
}

// 百度地图
#container {
  position: fixed;
  top: 0px;
  left: 0;
  right: 0;
  bottom: 0;
  height: 200px;
  margin-bottom: 10px;
}

.info {
  z-index: 999;
  width: auto;
  min-width: 22rem;
  padding: 0.75rem 1.25rem;
  // margin-left: 1.25rem;
  // position: fixed;
  // top: 1rem;
  background-color: #fff;
  border-radius: 0.25rem;
  font-size: 14px;
  color: #666;
  box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
}
</style>